/**
 * Created by GYL on 2018/7/25
 */
import React, { Component } from 'react';
import { Card, Row, Col, Button, Input, Tag, message, Select } from 'antd';
import style from './SyndromeAQY.less';
import MyModal from '../../components/common/MyModal';
import Container from '../../components/common/Container';
import PublicService from '../../services/PublicService';
import MyTable from '../../components/common/MyTable';
import AddModal from './sub/AddModal';
import CheckModel from './sub/CheckModel';
import EditModel from './sub/EditModel';
import request from '../../utils/request';
import moment from 'moment'
import MyPagination from '../../components/common/MyPagination';
const Option = Select.Option;
const provinceData = ['Zhejiang', 'Jiangsu'];
const cityData = {
    Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
    Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
};

class SyndromeAQY extends Component {
    state = {
        certificateStatus:"",
        companyId: "",
        gasStationId: "",
        name: "",
        qyArr: [],
        rqzArr: [],
        cities: cityData[provinceData[0]],
        secondCity: cityData[provinceData[0]][0],
        fileUploadList: [],
        total: 0,
        editModel: false,
        checkModel: false,
        addModal: false,
        loading: false,
        visible: false,
        selectedRowKeys: [],
        selectedRows: [],
        dataSource: [],
        pageIndex: 1,
        pageSize: 10,
        key: "",
        columns: [
            {
                title: '序号',
                dataIndex: 'num',
                width: 50,
                align: "center",
                fixed: 'left',
                render: (text, record) => <span >
                    {text}
                    <span className={style.ciebox} style={{ width: 5, height: 20, backgroundColor: record.certificateStatus === 1 ? "#f5222d" : record.certificateStatus === 2 ? "#e3682a" : "#52c41a", position: "absolute", left: 0 }}>
                    </span>
                </span>
            },
            {
                title: '燃气公司',
                dataIndex: 'companyName',
                width: 250,
                align: "center",
                fixed: 'left',

            },
            {
                title: '燃气供应站',
                dataIndex: 'gasStationName',
                width: '12%',
                align: "center",
            },
            {
                title: "安全员",
                dataIndex: 'name',
                width: '8%',
                align: "center",
                render: (text) => <span>{text ? text : '/'}</span>
            },
            {
                title: '身份证号',
                width: '12%',
                dataIndex: 'idNumber',
                align: "center",
            },
            {
                title: '联系方式',
                dataIndex: 'phone',
                width: '8%',
                align: "center",
            },
            {
                title: '安全员许可证编号',
                dataIndex: 'licenseNumber',
                width: '12%',
                align: "center",
            },
            {
                title: '有效期',
                dataIndex: 'deadline',
                width: '10%',
                align: "center",
            },
            {
                title: '证件状态',
                dataIndex: 'certificateStatus',
                width: '8%',
                align: "center",
                render: (text, record) => <span >
                    {record.certificateStatus === 1 ? '已过期' : record.certificateStatus === 2 ? '即将过期' : "未过期"}
                </span>
            },
            {
                title: '操作',
                dataIndex: 'caozuo',
                width: 150,
                align: "center",
                fixed: 'right',
                render: (text, record) => {
                    return <span>
                        <Tag color="#108ee9" onClick={this.onEdit.bind(this, record)}>编辑</Tag>
                        <Tag color="#87d068" onClick={this.onCheck.bind(this, record)}>查看</Tag>
                        <Tag color="#f50" onClick={this.onCheck.bind(this, record)}>预警</Tag>
                    </span>

                }
            },

        ]
    }
    componentDidMount() {
        this.findNameAndIdByCompanyId("")
        this.save(1, 10)
        request({
            url: `/zhrq-web/gas/company/findNameAndId`,
            method: 'POST',
            data: {

            }
        }).then(data => {
            console.log(data)
            if(data.rc === 0) {
                let qyArrSelect = []
                data.ret.forEach((item) => {
                    qyArrSelect.push({text:item.name,value:item.id})
                })
                this.setState({
                    qyArrSelect,
                    qyArr: data.ret
                })
            }
           
        })
    }
    handleProvinceChange = (value) => {
        this.setState({
            cities: cityData[value],
            secondCity: cityData[value][0],
        });
    }

    onSecondCityChange = (value) => {
        this.setState({
            secondCity: value,
        });
    }
    //编辑按钮
    onEdit = (record) => {
        console.log(record)
        request({
            url: `/zhrq-web/patrol/safetyofficer/findOne`,
            method: 'POST',
            data:{id:record.id}
        }).then(data => {
            console.log(data)
            if (data.rc == 0) {
                PublicService.setCookie('pid', record.id);
              data.ret.deadline = moment(data.ret.deadline)
                this.setState({
                    company: data.ret.company.id,
                    gasStation: data.ret.gasStation.id,
                    AQYname: data.ret.name,
                    idNumber: data.ret.idNumber,
                    phone: data.ret.phone,
                    licenseNumber: data.ret.licenseNumber,
                    deadline: data.ret.deadline,
                    editModel: true
                })
            }
        })
    }

    //查看按钮
    onCheck = (record) => {
        console.log(record)
        request({
            url: `/zhrq-web/patrol/safetyofficer/findOne`,
            method: 'POST',
            data:{id:record.id}
        }).then(data => {
            console.log(data)
            if (data.rc == 0) {
                PublicService.setCookie('pid', record.id);
              data.ret.deadline = moment(data.ret.deadline)
                this.setState({
                    company: data.ret.company.id,
                    gasStation: data.ret.gasStation.id,
                    AQYname: data.ret.name,
                    idNumber: data.ret.idNumber,
                    phone: data.ret.phone,
                    licenseNumber: data.ret.licenseNumber,
                    deadline: data.ret.deadline,
                    checkModel: true
                })
            }
        })
    }

    //关键词搜索
    oninput = (e, b) => {

        this.setState({
            name: e.target.value
        })
    }

    onSelectChange = (keys, rows) => {
        console.log(rows)
        this.setState({
            selectedRowKeys: keys,
            selectedRows: rows
        });
    };

    //新增保存按钮
    ModalOk = (val, type, v) => {
        console.log(val, type, v)
        val.deadline = moment(val.deadline).format("YYYY-MM-DD")
        
        // return
        let data = {
            ...val,
            company: {
                id:val.company
            },
            gasStation:{
                id:val.gasStation
            },
            beenDeleted: 0
        }

        request({
            url: '/zhrq-web/patrol/safetyofficer/insertSafetyOfficer',
            method: 'POST',
            data: data
        }).then(data => {
            console.log(data)
            if (data.rc == 0) {
                message.success("新增成功")
                this.save(1, 10)
                this.setState({
                    addModal: false,
                })
            } else {
                message.success("新增失败")
                this.save(1, 10)
                this.setState({
                    addModal: false,
                })
            }
        })


    }

    //编辑保存按钮
    editModelOk = (val, type, v) => {
        console.log(val, type, v)
        val.deadline = moment(val.deadline).format("YYYY-MM-DD")
        let data = {
            ...val,
            company: {
                id:val.company
            },
            gasStation:{
                id:val.gasStation
            },
            beenDeleted: 0,
            id:PublicService.getCookie("pid")
        }

        request({
            url: '/zhrq-web/patrol/safetyofficer/insertSafetyOfficer',
            method: 'POST',
            data: data
        }).then(data => {
            console.log(data)
            if (data.rc == 0) {
                message.success("编辑成功")
                this.save(1, 10)
                this.setState({
                    editModel: false,
                })
            } else {
                message.success("编辑失败")
                this.save(1, 10)
                this.setState({
                    editModel: false,
                })
            }
        })


    }

    // 取消保存
    ModalCancel = (type) => {
        let t = this;
        t.setState({
            [type]: false,
            modalBtnLoading: false
        })
    };

    //新增
    addBtnText = () => {
        request({
            url: '/zhrq-web/gas/company/insertCompany',
            method: 'POST',
            data: { beenDeleted: 1 }
        }).then(data => {
            console.log(data)
            if (data.rc == 0) {
                PublicService.setCookie('pid', data.ret.id);
                this.setState({
                    btn: "保存",
                    addModal: true,
                });
            }
        })

    }

    //分页器
    onChangePage = (page, size) => {

        this.setState({
            page,
            rows: size,
            pageIndex: page,
            pageSize: size
        })
    };
    //查询
    save = (page, rows) => {
        let data = {
            page, rows,
            companyId: this.state.companyId,
            gasStationId: this.state.gasStationId,
            name: this.state.name,
            certificateStatus:this.state.certificateStatus
        }
        request({
            url: '/zhrq-web/patrol/safetyofficer/findPageList',
            method: 'POST',
            data: data
        }).then(data => {
            if (data.rc == 0) {
                data.ret.items.forEach((item) => {
                    item.deadline = moment(item.deadline).format("YYYY-MM-DD")
                })
                this.setState({
                    dataSource: data.ret.items,
                    total: data.ret.rowCount
                })
            }
        })
    }

    //删除
    setDelConfirm = () => {
        let data = []
        this.state.selectedRows.forEach((item) => {
            data.push({
                id: item.id
            })
        })
        request({
            url: '/zhrq-web/patrol/safetyofficer/deleteList',
            method: 'POST',
            data: data
        }).then(data => {
            if (data.rc == 0) {
                message.success("删除成功")
                this.save(1, 10)
                this.setState({
                    selectedRowKeys: [],
                    selectedRows: [],
                })
            }
        })
    }

    //onTag
    onTag = (a) => {
        this.setState({
            certificateStatus:a
        })

        setTimeout(() => {
            this.save(1,10)
        },300)

    }
    //企业下拉
    onSelect = (a, b, c) => {
        console.log(a, b, c)
        this.setState({
            companyId: a
        })
        //燃气站下拉
        this.findNameAndIdByCompanyId(a)

    }

    //燃气站下拉
    findNameAndIdByCompanyId = (a) => {
        request({
            url: '/zhrq-web/gas/station/findNameAndIdByCompanyId',
            method: 'POST',
            data: {
                companyId: a
            }
        }).then(data => {
            if (data.rc == 0) {
                console.log(data)
                let rqzArrSelect = []
                data.ret.forEach((item) => {
                    rqzArrSelect.push({text:item.name,value:item.id})
                })

                this.setState({
                    rqzArrSelect,
                    rqzArr: data.ret
                })
            }
        })
    }

    onRqzSelect = (a, b) => {
        console.log(a, b)
        this.setState({
            gasStationId: a
        })
    }

    render() {
        const { checkModel, editModel, total, loading, selectedRowKeys, dataSource, pageIndex, pageSize, addModal, modalBtnLoading } = this.state
        const windowWidth = document.body.clientWidth;

        const height = document.body.clientHeight;
        let containerHeight = '86vh';
        if (windowWidth > 1367) {
            containerHeight = '86vh';
        }
        let rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };

        const items = [
            {
                type: 'select',
                label: "燃气公司",
                paramName: 'company',
                placeholder: '请输入',
                width: 200,
                span: 12,
                options: this.state.qyArrSelect,
            },
            {
                type: 'select',
                label: "供应站",
                paramName: 'gasStation',
                placeholder: '请输入',
                width: 200,
                span: 12,
                options: this.state.rqzArrSelect
            },
            {
                type: 'input',
                label: '安全员姓名',
                paramName: 'name',
                placeholder: '请输入',
                width: 200,
                span: 12
            },
            {
                type: 'input',
                label: '身份证号',
                paramName: 'idNumber',
                placeholder: '请输入',
                width: 200,
                span: 12
            },
            {
                type: 'input',
                label: '联系方式',
                paramName: 'phone',
                placeholder: '请输入',
                width: 200,
                span: 12
            },
            {
                type: 'input',
                label: '安全员许可证编号',
                paramName: 'licenseNumber',
                placeholder: '请输入',
                width: 200,
                span: 12
            },
            {
                type: 'DatePicker',
                label: '有效期至',
                paramName: 'deadline',
                placeholder: '请输入',
                width: 200,
                span: 12
            },
            {
                type: 'Upload',
                label: '相关附件',
                paramName: 'fileUploadId',
                width: 200,
                span: 12
            },
        ];
        const checkitems = [
            {
                type: 'select',
                label: "燃气公司",
                paramName: 'company',
                placeholder: '请输入',
                initialValue: this.state.company,
                disabled: true,
                width: 200,
                span: 12,
                options: this.state.qyArrSelect,
            },
            {
                type: 'select',
                label: "供应站",
                paramName: 'gasStation',
                placeholder: '请输入',
                initialValue: this.state.gasStation,
                disabled: true,
                width: 200,
                span: 12,
                options: this.state.rqzArrSelect
            },
            {
                type: 'input',
                label: '安全员姓名',
                paramName: 'name',
                initialValue: this.state.AQYname,
                placeholder: '请输入',
                width: 200,
                disabled: true,
                span: 12
            },
            {
                type: 'input',
                label: '身份证号',
                paramName: 'idNumber',
                initialValue: this.state.idNumber,
                placeholder: '请输入',
                width: 200,
                disabled: true,
                span: 12
            },
            {
                type: 'input',
                label: '联系方式',
                paramName: 'phone',
                placeholder: '请输入',
                initialValue: this.state.phone,
                width: 200,
                disabled: true,
                span: 12
            },
            {
                type: 'input',
                label: '安全员许可证编号',
                initialValue: this.state.licenseNumber,
                paramName: 'licenseNumber',
                placeholder: '请输入',
                width: 200,
                disabled: true,
                span: 12
            },
            {
                type: 'DatePicker',
                label: '有效期至',
                initialValue: this.state.deadline,
                paramName: 'deadline',
                placeholder: '请输入',
                width: 200,
                span: 12
            },
            {
                type: 'Upload',
                label: '相关附件',
                paramName: 'fileUploadId',
                width: 200,
                span: 12
            },
        ];

        const { cities } = this.state;
        return (
            <div>

                {
                    checkModel &&
                    <CheckModel
                        // type={type}
                        visible={checkModel}
                        title={"查看"}
                        style={{ height: "80vh" }}
                        // modalBtnLoading={modalBtnLoading}
                        data={checkitems}
                        fileUploadList={this.state.fileUploadList}
                        footerShow={false}
                        onModalSave={this.checkModel}
                        onCancel={this.ModalCancel.bind(this, 'checkModel')}

                    />
                }

                {
                    addModal &&
                    <AddModal
                        // type={type}
                        visible={addModal}
                        title={"新增安全员信息"}
                        style={{ height: "80vh" }}
                        // modalBtnLoading={modalBtnLoading}
                        data={items}
                        footerShow={true}
                        onModalSave={this.ModalOk}
                        onCancel={this.ModalCancel.bind(this, 'addModal')}

                    />
                }
                {
                    editModel &&
                    <EditModel
                        // type={type}
                        visible={editModel}
                        title={"编辑安全员信息"}
                        style={{ height: "80vh" }}
                        // modalBtnLoading={modalBtnLoading}
                        data={checkitems}
                        fileUploadList={this.state.fileUploadList}
                        footerShow={true}
                        onModalSave={this.editModelOk}
                        onCancel={this.ModalCancel.bind(this, 'editModel')}

                    />
                }
                <Card className={style.Top_box}
                    bodyStyle={{ padding: "6px 24px" }}
                >
                    <Row>
                        <Col span={24} ><span style={{ margin: "0px 10px" }}>燃气公司 : </span>
                            <Select

                                style={{ width: 240 }}
                                size='small'
                                onChange={this.onSelect}
                            >

                                {this.state.qyArr.map(city => <Option key={city.id}>{city.name}</Option>)}
                            </Select>

                            <span style={{ margin: "0px 10px" }}>燃气供应站 : </span>
                            <Select
                                style={{ width: 240 }}
                                size='small'
                                onChange={this.onRqzSelect}

                            >
                                {this.state.rqzArr.map(city => <Option key={city.id}>{city.name}</Option>)}
                            </Select>

                            <span style={{ margin: "0px 10px" }}>安全员 : </span> <Input onChange={this.oninput} size="small" placeholder="请输入" style={{ width: 200, marginRight: 20, marginLeft: 5 }} value={this.state.name} />  <Button type="primary" size="small" onClick={this.save.bind(this, 1, 10)}>查询</Button> <Button size="small">重置</Button></Col>
                    </Row>

                </Card>

                <Container
                    style={{ height: containerHeight, position: "relative", marginTop: "-1vh", padding: "0px 0px" }}
                    // header={true}
                    addBtnShow={true}
                    addBtnText={this.addBtnText}
                    setDelConfirm={this.setDelConfirm}
                    deleteBtnShow={true}
                >
                    <div className={style.Con_header}>

                        <Tag color={this.state.certificateStatus === "" ? "#108ee9" : "blue"} onClick={this.onTag.bind(this, "")}>全部</Tag>
                        <Tag color={this.state.certificateStatus === 3 ? "#52c41a" : "green"} onClick={this.onTag.bind(this, 3)}>未过期</Tag>
                        <Tag color={this.state.certificateStatus === 2 ? "#e3682a" : "orange"} onClick={this.onTag.bind(this, 2)}>即将过期</Tag>
                        <Tag color={this.state.certificateStatus === 1 ? "#fc1808" : "red"} onClick={this.onTag.bind(this, 1)}>已过期</Tag>
                    </div>
                    <div style={{ height: "66vh", overflow: "auto" }} className={style.mytable}>
                        <MyTable
                            // bordered
                            loading={loading}
                            columns={this.state.columns}
                            rowSelection={rowSelection}
                            pagination={false}
                            scroll={{ x: 1600 }}
                            // scroll={{ Y: windowWidth < 1400 ? height - 280 : height - 300 }}
                            dataSource={PublicService.transformArrayData(dataSource, true, true, pageIndex, pageSize)}
                        />

                    </div>
                    <MyPagination

                        showPage
                        pageSize={pageSize}
                        current={pageIndex}
                        total={total}
                        showSizeChanger
                        showQuickJumper
                        onChange={this.onChangePage}
                        onShowSizeChange={this.onChangePage}
                    />

                </Container>
            </div>
        )
    }
}
export default (SyndromeAQY); 
